<#systemSituation globalInfo="${globalInfo}"/>
<!-- widget grid -->
<section>

    <!-- row -->
    <div class="row">

        <!-- NEW WIDGET START -->
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

            <div class="jarviswidget jarviswidget-color-blueDark" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-table"></i> </span>

                    <h2>Mysql监控 </h2>

                </header>

                <div>

                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->
                    </div>
                    <!-- end widget edit box -->

                    <!-- widget content -->
                    <div class="well well-clean padding-bottom-0 padding-top-0 margin-bottom-0">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-6" style="padding-left: 0;">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">基本信息</h3>
                                    </div>
                                    <div class="panel-body no-padding text-align-center">
                                        <table class="table table-bordered">
                                            <tr>
                                                <td width="30%">
                                                    数据库地址
                                                </td>
                                                <td width="70%" id="mysqlHost">
                                                </td>
                                            </tr>
                                            <tr class="active">
                                                <td>
                                                    数据库端口
                                                </td>
                                                <td>
                                                    <span class="label label-primary" id="mysqlPort"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    数据库名称
                                                </td>
                                                <td id="mysqlName">
                                                </td>
                                            </tr>
                                            <tr class="active">
                                                <td>
                                                    版本
                                                </td>
                                                <td>
                                                    <span class="badge bg-color-greenLight" id="mysqlVersion"></span>
                                                </td>
                                            </tr>
                                            <tr class="active">
                                                <td>
                                                    地址
                                                </td>
                                                <td id="mysqlAddr">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="panel-footer text-align-right">
                                        <a id="mysqlBackup" href="javascript:void(0);" class="btn btn-success"><i
                                                class="fa fa-mail-reply"></i>
                                            备份</a>
                                        <a id="mysqlRestore" href="javascript:void(0);" class="btn btn-info"><i
                                                class="fa fa-mail-forward"></i> 还原</a>
                                        <a id="mysqlRestart" href="javascript:void(0);" class="btn btn-danger"><i
                                                class="fa fa-play-circle"></i>
                                            重启</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6" style="padding-right: 0;">
                                <div class="panel panel-success">
                                    <img id="mysqlPng" src="${ctx}/static/img/status-error.png" class="ribbon">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">
                                            状态信息</h3>
                                    </div>
                                    <div class="panel-body no-padding text-align-center">
                                        <table class="table table-bordered">
                                            <tr>
                                                <td width="30%">
                                                    运行状态
                                                </td>
                                                <td width="70%">
                                                    <span class="badge bg-color-greenLight" id="mysqlStatus"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td width="30%">
                                                    运行时间
                                                </td>
                                                <td width="70%" id="mysqlUptime">
                                                </td>
                                            </tr>
                                            <tr class="active">
                                                <td>
                                                    进程名
                                                </td>
                                                <td>
                                                    <span class="label label-info" id="mysqlProcess"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td valign="middle">
                                                    连接信息
                                                </td>
                                                <td rowspan="2" id="mysqlLink">
                                                    <div class="easy-pie-chart txt-color-orangeDark" data-percent="33"
                                                         data-pie-size="50">
                                                        <span class="percent percent-sign">35</span>
                                                    </div>
                                                <span class="easy-pie-title"> 可用连接趋势 <i
                                                        class="fa fa-caret-up icon-color-bad"></i> </span>
                                                    <ul class="smaller-stat hidden-sm pull-right">
                                                        <li>
                                                        <span class="label bg-color-greenLight"><i
                                                                class="fa fa-caret-up"></i> 97%</span>
                                                        </li>
                                                        <li>
                                                        <span class="label bg-color-blueLight"><i
                                                                class="fa fa-caret-down"></i> 44%</span>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>

                                        </table>
                                    </div>
                                    <div class="panel-footer text-align-right">
                                        <a id="mysqlRefresh" href="javascript:void(0);" class="btn btn-success"><i
                                                class="fa fa-refresh"></i>
                                            刷新</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <!-- Widget ID (each widget will need unique ID)-->
                            <div class="jarviswidget jarviswidget-color-blueLight" data-widget-fullscreenbutton="true">
                                <header>
                                    <span class="widget-icon"> <i class="fa fa-line-chart"></i> </span>
                                    <h2>Mysql 统计信息</h2>
                                    <div class="widget-toolbar no-padding">

                                        <select name="type" id="collType" rel="tooltip" data-placement="top"
                                                data-original-title="统计的级别">
                                            <option value="1">缓存命中率</option>
                                            <option value="2">流量</option>
                                            <option value="3">连接数</option>
                                            <option value="4">处理数</option>
                                        </select>

                                    </div>
                                </header>

                                <!-- widget div-->
                                <div>
                                    <!-- widget content -->
                                    <div class="widget-body">
                                        <!-- widget body text-->
                                        <div id="mysqlChart" style="height: 300px;">
                                        </div>
                                        <!-- end widget body text-->
                                    </div>
                                    <!-- end widget content -->

                                </div>
                                <!-- end widget div -->

                            </div>
                            <!-- end widget -->
                        </div>
                        <div class="row">
                            <!-- Widget ID (each widget will need unique ID)-->
                            <div class="jarviswidget jarviswidget-color-blueLight" data-widget-colorbutton="false"
                                 data-widget-editbutton="false" data-widget-togglebutton="false"
                                 data-widget-deletebutton="false" data-widget-custombutton="false">
                                <header>
                                    <span class="widget-icon"> <i class="fa fa-bars"></i> </span>
                                    <h2> Mysql 进程信息</h2>
                                </header>

                                <!-- widget div-->
                                <div>
                                    <!-- widget content -->
                                    <div class="widget-body no-padding">
                                        <!-- widget body text-->
                                        <div id="mysqlTable">
                                        </div>
                                        <!-- end widget body text-->
                                    </div>
                                    <!-- end widget content -->
                                </div>
                                <!-- end widget div -->
                            </div>
                            <!-- end widget -->
                        </div>
                    </div>

                </div>
            </div>

        </article>
        <!-- WIDGET END -->
    </div>
    <!-- end row -->
</section>
<!-- end widget grid -->

<script type="text/javascript">

    /* DO NOT REMOVE : GLOBAL FUNCTIONS!
     *
     * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
     *
     * // activate tooltips
     * $("[rel=tooltip]").tooltip();
     *
     * // activate popovers
     * $("[rel=popover]").popover();
     *
     * // activate popovers with hover states
     * $("[rel=popover-hover]").popover({ trigger: "hover" });
     *
     * // activate inline charts
     * runAllCharts();
     *
     * // setup widgets
     * setup_widgets_desktop();
     *
     * // run form elements
     * runAllForms();
     *
     ********************************
     *
     * pageSetUp() is needed whenever you load a page.
     * It initializes and checks for all basic elements of the page
     * and makes rendering easier.
     *
     */
    pageSetUp();

    /*
     * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
     */
    // PAGE RELATED SCRIPTS
    // pagefunction
    var pagefunction = function () {

        /**
         * 刷新
         */
        function refresh() {
            // 获取mysql当前信息
            $.ajax({
                url: '${ctx}/monitors/mysql/current',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    if (data) {
                        var status = data.status;
                        if (status) {
                            $('#mysqlPng').attr('src', "${ctx}/static/img/status-ok.png");
                        } else {
                            $('#mysqlPng').attr('src', "${ctx}/static/img/status-error.png");
                        }
                        $('#mysqlHost').html(data.host);
                        $('#mysqlPort').html(data.port);
                        $('#mysqlName').html(data.dbName);
                        $('#mysqlVersion').html(data.version);
                        $('#mysqlAddr').html(data.baseDir);
                        $('#mysqlStatus').html(status ? '正常' : '异常');
                        $('#mysqlUptime').html(data.hostName);
                        $('#mysqlProcess').html(data.process);
                        var v = Math.round(data.threadConnections * 100 / data.maxConnections);
                        $('#mysqlLink').find('.easy-pie-chart').data('easyPieChart').update(v);
                        $('#mysqlLink').find('.percent-sign').html(v);
                        runAllCharts();
                    }
                }
            });
        }

        refresh();

        // 刷新
        $('#mysqlRefresh').on('click', function () {
            refresh();
        });
        // 备份
        $('#mysqlBackup').on('click', function () {
            ajaxCoomand({
                url: '${ctx}/monitors/mysql/backup',
                callback: function () {
                    refresh();
                }
            });
        });
        // 恢复
        $('#mysqlRestore').on('click', function () {
            ajaxCoomand({
                url: '${ctx}/monitors/mysql/restore',
                callback: function () {
                    refresh();
                }
            });
        });
        // 重启
        $('#mysqlRestart').on('click', function () {
            ajaxCoomand({
                url: '${ctx}/monitors/mysql/restart',
                callback: function () {
                    refresh();
                }
            });
        });

        // 初始化图表选择
        var $type = $('#collType');
        $type.select2({
            width: 200
        });
        // action
        $type.on('change', function () {
            var params = {
                type: 1,
                formatType: 'package',
                title: 'Mysql缓存命中率趋势图',
                legends: ['缓存命中率', '缓存读命中率', '缓存写命中率']
            };

            var type = $type.val();
            if (type == 2) {
                params = {
                    type: 2,
                    formatType: 'flow',
                    title: 'Mysql流量趋势图',
                    legends: ['平均每秒钟的输入流量', '平均每秒钟的输出流量']
                };
            } else if (type == 3) {
                params = {
                    type: 3,
                    formatType: 'package',
                    title: 'Mysql连接数趋势图',
                    legends: ['最大连接数', '当前连接数']
                };
            } else if (type == 4) {
                params = {
                    type: 4,
                    formatType: 'package',
                    title: 'Mysql处理数趋势图',
                    legends: ['每秒sql执行数', '每秒事务执行数']
                };
            }

            initChart(params);
        });

        <!-- chart libraries start -->
        loadScript("/static/js/plugin/echarts/echarts.min.js", function () {
            loadScript("/static/js/plugin/echarts/macarons.js", function () {
                loadScript("/static/js/extend/chartData.js", function () {
                    initChart();
                });
            });
        });
        // 初始化chart
        var mysqlChart = null;

        function initChart(params) {

            // 先销毁旧的
            if (mysqlChart && mysqlChart.getChart() && mysqlChart.getChart().dispose) {
                mysqlChart.getChart().dispose();
            }
            if (params == null || params == undefined) {
                params = {
                    type: 1,
                    formatType: 'package',
                    title: 'Mysql缓存命中率趋势图',
                    legends: ['缓存命中率', '缓存读命中率', '缓存写命中率']
                };
            }
            // init
            mysqlChart = new ChartData({
                // dom节点
                databind: $('#mysqlChart').get(0),
                type: 'line',
                dataurl: '${ctx}/monitors/mysql/chartData',
                params: {type: params.type},
                title: params.title,
                legends: params.legends,
                formatType: params.formatType,
                config: {
                    dataZoom: [{
                        end: 10
                    }, {
                        end: 10,
                        show: true
                    }]
                }
            });
        }

        // 初始化process表
        new DataTableData({
                    databind: $('#mysqlTable').get(0),
                    //数据请求url地址
                    dataurl: '${ctx}/monitors/mysql/processList',
                    hasCache: false,
                    hasIndex: true,
                    info: false,
                    alls: true,
                    toolbarStates: {
                        "add": {show: false},
                        "edit": {show: false},
                        "delete": {show: false}
                    },
                    columns: [
                        {
                            data: 'processId', title: '进程号',
                            render: function (value) {
                                return '<div class="text-center"><span class="badge bg-color-greenLight">' + value + '</span></div>';
                            }
                        },
                        {data: 'host', title: '连接主机(端口)'},
                        {data: 'dbName', title: '数据库名称', "defaultContent": ''},
                        {data: 'command', title: '执行命令'},
                        {
                            data: 'state', title: '连接状态', "defaultContent": '',
                            render: function (value) {
                                return '<div class="text-center"><span class="label label-primary">' + value + '</span></div>';
                            }
                        },
                        {
                            data: 'time', title: '连接时间',
                            render: function (value) {
                                return '<div class="text-center">' + value + '</div>';
                            }
                        },
                        {data: 'info', title: '详细信息', "defaultContent": ''}
                    ]
                }
        );
    };

    // destroy generated instances
    // pagedestroy is called automatically before loading a new page
    // only usable in AJAX version!
    var pagedestroy = function () {
        // 销毁
    };
    // end destroy

    // load related plugins
    loadScript("/static/js/plugin/datatables/jquery.dataTables.js", function () {
        loadScript("/static/js/plugin/datatables/dataTables.colVis.js", function () {
            loadScript("/static/js/plugin/datatables/dataTables.tableTools.js", function () {
                loadScript("/static/js/plugin/datatables/dataTables.bootstrap.js", function () {
                    loadScript("/static/js/plugin/datatable-responsive/datatables.responsive.js", function () {
                        loadScript("/static/js/extend/DataTableData.js", pagefunction);
                    });
                });
            });
        });
    });

</script>